<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>乘车人管理系统</title>
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/3.2.20/ant-design-vue.min.css">
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer">
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"
    integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/3.2.20/ant-design-vue.min.js"></script>
</head>
<template>
    <div class="app-header">
      <div class="app-title">
        <i class="fas fa-users"></i>
        <h1>乘客管理系统</h1>
      </div>
      <div class="action-buttons">
        <a-button type="primary" @click="handleQuery()">
          <template #icon><i class="fas fa-sync-alt"></i></template>
          刷新
        </a-button>
        <a-button type="primary" @click="onAdd">
          <template #icon><i class="fas fa-plus"></i></template>
          新增
        </a-button>
      </div>
    </div>
    <!--    <a-space>-->
    <!--      <a-button type="primary" @click="handleQuery()">刷新</a-button>-->
    <!--      <a-button type="primary" @click="onAdd">新增</a-button>-->
    <!--    </a-space>-->
  <div class="stats-container">
    <div class="stat-card blue">
      <h3><i class="fas fa-users"></i> 总乘车人数</h3>
      <div class="value">{{ passengers.length }}</div>
    </div>
    <div class="stat-card green">
      <h3><i class="fas fa-id-card"></i> 成人票</h3>
      <div class="value">{{ passengerCountByType("1") }}</div>
    </div>
    <div class="stat-card orange">
      <h3><i class="fas fa-child"></i> 儿童票</h3>
      <div class="value">{{ passengerCountByType("2") }}</div>
    </div>
    <div class="stat-card purple">
      <h3><i class="fas fa-user-graduate"></i> 学生票</h3>
      <div class="value">{{ passengerCountByType("3") }}</div>
    </div>
  </div>

  <div class="search-container">
    <a-input v-model="params.name" placeholder="搜索乘车人姓名..." allow-clear>
      <template #prefix><i class="fas fa-search"></i></template>
    </a-input>
    <a-input v-model="params.idCard" placeholder="搜索身份证号..." allow-clear>
      <template #prefix><i class="fas fa-id-card"></i></template>
    </a-input>
    <a-button type="primary" @click="handleQuery()">搜索</a-button>
  </div>
  <div class="table-container">
    <a-table
        :dataSource="passengers"
        :columns="columns"
        :pagination="pagination"
        @change="handleTableChange"
        :loading="loading"
        row-key="id"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-space>
            <a-popconfirm
                title="删除后不可恢复，确认删除?"
                @confirm="onDelete(record)"
                ok-text="确认"
                cancel-text="取消"
            >
              <a class="action-link delete-link">
                <i class="fas fa-trash-alt"></i> 删除
              </a>
            </a-popconfirm>
            <a class="action-link" @click="onEdit(record)">
              <i class="fas fa-edit"></i> 编辑
            </a>
          </a-space>
        </template>
        <template v-else-if="column.dataIndex === 'type'">
          <a-tag :color="getTypeColor(record.type)">
                <span v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code">
                  <span v-if="item.code === record.type">
                    {{item.desc}}
                  </span>
                </span>
          </a-tag>
        </template>
      </template>
    </a-table>
  </div>
<!--    <a-table :dataSource="passengers"-->
<!--             :columns="columns"-->
<!--             :pagination="pagination"-->
<!--             @change="handleTableChange"-->
<!--             :loading="loading">-->
<!--      <template #bodyCell="{ column, record }">-->
<!--        <template v-if="column.dataIndex === 'operation'">-->
<!--          <a-space>-->
<!--            <a-popconfirm-->
<!--                title="删除后不可恢复，确认删除?"-->
<!--                @confirm="onDelete(record)"-->
<!--                ok-text="确认" cancel-text="取消">-->
<!--              <a style="color: red">删除</a>-->
<!--            </a-popconfirm>-->
<!--            <a @click="onEdit(record)">编辑</a>-->
<!--          </a-space>-->
<!--        </template>-->
<!--        <template v-else-if="column.dataIndex === 'type'">-->
<!--        <span v-for="item in PASSENGER_TYPE_ARRAY" :key="item.key">-->
<!--          <span v-if="item.key === record.type">-->
<!--            {{item.value}}-->
<!--          </span>-->
<!--        </span>-->
<!--        </template>-->
<!--      </template>-->
<!--    </a-table>-->

  <a-modal
      v-model:visible="visible"
      title="乘车人信息"
      @ok="handleOk"
      ok-text="确认"
      cancel-text="取消"
      :width="600"
      centered
  >
    <a-form
        :model="passenger"
        :label-col="{span: 5}"
        :wrapper-col="{ span: 18 }"
        layout="horizontal"
    >
      <a-form-item label="姓名" required>
        <a-input v-model:value="passenger.name" placeholder="请输入乘车人姓名" />
      </a-form-item>
      <a-form-item label="身份证" required>
        <a-input v-model:value="passenger.idCard" placeholder="请输入身份证号码" />
      </a-form-item>
      <a-form-item label="类型" required>
        <a-select v-model:value="passenger.type" placeholder="请选择乘客类型">
          <a-select-option
              v-for="item in PASSENGER_TYPE_ARRAY"
              :key="item.code"
              :value="item.code"
          >
            {{item.desc}}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="back" @click="visible = false">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk">保存</a-button>
    </template>
  </a-modal>
<!--    <a-modal v-model:visible="visible" title="乘车人" @ok="handleOk"-->
<!--             ok-text="确认" cancel-text="取消">-->
<!--      <a-form :model="passenger" :label-col="{span: 4}" :wrapper-col="{ span: 20 }">-->
<!--        <a-form-item label="姓名">-->
<!--          <a-input v-model:value="passenger.name" />-->
<!--        </a-form-item>-->
<!--        <a-form-item label="身份证">-->
<!--          <a-input v-model:value="passenger.idCard" />-->
<!--        </a-form-item>-->
<!--        <a-form-item label="类型">-->
<!--          <a-select v-model:value="passenger.type">-->
<!--            <a-select-option v-for="item in PASSENGER_TYPE_ARRAY" :key="item.key" :value="item.key">{{item.value}}</a-select-option>-->
<!--          </a-select>-->
<!--        </a-form-item>-->
<!--      </a-form>-->
<!--    </a-modal>-->

</template>
<script>
import { defineComponent, ref, onMounted } from 'vue';
import {notification} from "ant-design-vue";
import axios from "axios";

export default defineComponent({
  setup() {
    const PASSENGER_TYPE_ARRAY = window.PASSENGER_TYPE_ARRAY;
    const visible = ref(false);
    let passenger = ref({
      id: undefined,
      memberId: undefined,
      name: undefined,
      idCard: undefined,
      type: undefined,
      createTime: undefined,
      updateTime: undefined,
    });
    const passengers = ref([]);
    // 分页的三个属性名是固定的
    const pagination = ref({
      total: 0,
      current: 1,
      pageSize: 20,
    });
    let params = ref({
      name: null,
      idCard:null
    });
    let loading = ref(false);
    const columns = [{
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '身份证',
      dataIndex: 'idCard',
      key: 'idCard',
    }, {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    }, {
      title: '操作',
      dataIndex: 'operation'
    }];

    const onAdd = () => {
      passenger.value = {};
      visible.value = true;
    };

    const onEdit = (record) => {
      passenger.value = window.Tool.copy(record);
      visible.value = true;
    };

    const onDelete = (record) => {
      axios.delete("/member/passenger/delete/" + record.id).then((response) => {
        const data = response.data;
        if (data.success) {
          notification.success({description: "删除成功！"});
          handleQuery({
            page: pagination.value.current,
            size: pagination.value.pageSize,
          });
        } else {
          notification.error({description: data.message});
        }
      });
    };

    const handleOk = () => {
      axios.post("/member/passenger/save", passenger.value).then((response) => {
        let data = response.data;
        if (data.success) {
          notification.success({description: "保存成功！"});
          visible.value = false;
          handleQuery({
            page: pagination.value.current,
            size: pagination.value.pageSize
          });
        } else {
          notification.error({description: data.message});
        }
      });
    };
    const passengerCountByType = (type) => {
      return passengers.value.filter(p=>p.type === type).length;
    };
    const handleQuery = (param) => {
      if (!param) {
        param = {
          page: 1,
          size: pagination.value.pageSize
        };
      }
      loading.value = true;
      axios.get("/member/passenger/query-list", {
        params: {
          page: param.page,
          size: param.size,
          name:params.value.name,
          idCard:params.value.idCard
        }
      }).then((response) => {
        loading.value = false;
        let data = response.data;
        if (data.success) {
          passengers.value = data.content.list;
          // 设置分页控件的值
          pagination.value.current = param.page;
          pagination.value.total = data.content.total;
        } else {
          notification.error({description: data.message});
        }
      });
    };

    const handleTableChange = (pagination) => {
      // console.log("看看自带的分页参数都有啥：" + pagination);
      handleQuery({
        page: pagination.current,
        size: pagination.pageSize
      });
    };

    onMounted(() => {
      handleQuery({
        page: 1,
        size: pagination.value.pageSize
      });
    });

    const getTypeColor = (type) => {
      switch(type) {
        case 1: return 'blue';
        case 2: return 'orange';
        case 3: return 'purple';
        default: return 'default';
      }
    };

    return {
      PASSENGER_TYPE_ARRAY,
      passenger,
      visible,
      onAdd,
      handleOk,
      passengers,
      pagination,
      columns,
      handleTableChange,
      handleQuery,
      loading,
      onEdit,
      onDelete,
      passengerCountByType,
      getTypeColor,
      params
    };
  },
});
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  min-height: 100vh;
  padding: 20px;
  color: #333;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eaeff5;
}

.app-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.app-title h1 {
  font-size: 28px;
  font-weight: 600;
  color: #1a3353;
  margin: 0;
}

.app-title i {
  color: #1890ff;
  font-size: 32px;
  background: #e8f4ff;
  padding: 15px;
  border-radius: 12px;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #1890ff;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-card.blue {
  border-color: #1890ff;
}

.stat-card.green {
  border-color: #52c41a;
}

.stat-card.orange {
  border-color: #fa8c16;
}

.stat-card.purple {
  border-color: #722ed1;
}

.stat-card h3 {
  font-size: 16px;
  color: #6b7c93;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-card .value {
  font-size: 28px;
  font-weight: 700;
  color: #1a3353;
}

.table-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f2f5;
}

.ant-table {
  border-radius: 12px;
}

.ant-table-thead > tr > th {
  background: #f8fbff !important;
  color: #4a6a9d !important;
  font-weight: 600 !important;
  padding: 16px !important;
}

.ant-table-tbody > tr > td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #f0f2f5 !important;
}

.ant-table-tbody > tr:hover > td {
  background: #f8fbff !important;
}

.action-link {
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: 4px;
}

.action-link:hover {
  background: #e8f4ff;
  color: #1890ff;
}

.delete-link {
  color: #ff4d4f;
}

.delete-link:hover {
  background: #fff2f0;
  color: #ff4d4f;
}

.footer {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  color: #8a9bb2;
  font-size: 14px;
  border-top: 1px solid #f0f2f5;
}

.search-container {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  background: #f8fbff;
  padding: 20px;
  border-radius: 12px;
}

.search-container .ant-input {
  border-radius: 8px;
  height: 40px;
}

.search-container .ant-btn {
  border-radius: 8px;
  height: 40px;
}

@media (max-width: 768px) {
  .passenger-container {
    padding: 15px;
  }

  .app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .action-buttons {
    width: 100%;
  }

  .stats-container {
    grid-template-columns: 1fr;
  }

  .search-container {
    flex-direction: column;
  }
}
</style>
